<!--这是资料查看相关课程组件-->
<template>
	<div>
		<p class="filter"></p>
		<div class="addBox">
			<h3 class="fixTitle">
				<span>相关课程</span>
				<p>
					<!-- <em style="cursor: pointer;" ><svg-icon icon-class="jian" class="font-size16"/></em><em style="cursor: pointer;"><svg-icon class="font-size16" icon-class="fullScreen" /></em> -->
          <em style="cursor: pointer;" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em>
				</p>
			</h3>
      <code class="margin-t36">
        <svg-icon icon-class="message" style="margin-right:10px;color:red;font-size:20px;"></svg-icon>
        备注：设置课程/专栏/活动下的关联资料，请到对应课程/专栏/活动编辑页面操作
      </code>
      <div class="c-ph10">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="课程" name="course"></el-tab-pane>
          <el-tab-pane label="专栏" name="column"></el-tab-pane>
          <el-tab-pane label="活动" name="activity"></el-tab-pane>
        </el-tabs>
        <el-table :data="tableData" border row-key="id" v-loading="listLoading" fit highlight-current-row class="c-width100 color-222 family-PingFangSC-Regular font-s12">
          <el-table-column align="center" label="名称" >
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="类型">
              <template slot-scope="scope">
                <span>{{scope.row.courseType}}</span>
              </template>
          </el-table-column>
        </el-table>
      </div>
      <div class='c-mv10 text-c'>
        <el-pagination
          @current-change='handleCurrentChange'
          :current-page='listQuery.currentPage'
          :page-size='5'
          layout='total, prev, pager, next, jumper'
          :total='listQuery.total'>
        </el-pagination>
      </div>
      <p class="c-textAlign-c">
        <el-button type="primary" icon="el-icon-check" @click="close">关闭</el-button>
      </p>
		</div>
	</div>
</template>
<script>
import { getDatumRelate } from '@/api/datum'
export default {
  props: ['datumId'],
  data() {
    return {
      listQuery: {
        total: 0,
        currentPage: 1
      },
      tableData: [],
      relatedCourse: [],
      relatedColumn: [],
      relatedActivity: [],
      activeName: 'course',
      listLoading: false
    }
  },
  methods: {
    close() {
      this.$emit('hideRelated', false)
    },
    handleCurrentChange(val) {
      this.getDatumRelate(this.datumId, val, this.activeName)
    },
    getDatumRelate(datumId, page, name) {
      this.listLoading = true
      getDatumRelate({
        datumId: datumId,
        page: page,
        type: name
      }).then(res => {
        console.log('关联数据：', res.data)
        this.tableData = res.data.data.data
        // this.relatedCourse = res.data.data.course
        // this.relatedColumn = res.data.data.column
        // this.relatedActivity = res.data.data.activity
        this.listLoading = false
        // this.activeName == 'course' ? this.tableData = this.relatedCourse : (this.activeName == 'column' ? this.tableData = this.relatedColumn : this.tableData = this.relatedActivity)
        this.listQuery.total = res.data.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    handleTabClick() {
      this.getDatumRelate(this.datumId, 1, this.activeName)
    }
  },
  created() {
    this.activeName = 'course'
    this.getDatumRelate(this.datumId, 1, 'course')
  }
}
</script>

<style scoped>
	p,h3,ul,li {margin:0;padding:0}
	h3 em{
		padding: 0 5px;
		font-style: normal;
	}
	h3 em:hover{
		color: #0E90D2;
	}
	.fixTitle{
		font-weight: 500;
    padding: 0 10px;
    width: 700px;
	}
	.addBox {
		width: 700px;
		height: 550px;
		/* overflow: auto; */
		background: #fff;
		position: fixed;
		left: 25%;
		top: 5%;
		z-index: 110;
	}
</style>